<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			.mui-content {
				margin-top: 10px;
			}
			
			.mui-button-row {
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">考勤</h1>
		</header>
		<div id="content" class="mui-content">
			<div class="mui-button-row">
				<button type="button" id="locationId" class="mui-btn mui-btn-primary" onclick="onDuty();">上班打卡</button>
				<button type="button" id="locationId1" class="mui-btn mui-btn-success" onclick="offDuty();">下班打卡</button>
				<button type="button" id="uploadLocationId" class="mui-btn mui-btn-primary" onclick="createTableView();">查看本月考勤</button>
			</div>

			<div class="mui-card">
				<ul class="mui-table-view">

					<li class="mui-table-view-divider">12月10号</li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-primary">07:50</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-success">12:05</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-primary">07:50</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-success">12:05</span></li>

					<li class="mui-table-view-divider">12月11号</li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-primary">07:50</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-success">12:05</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-primary">07:50</span></li>
					<li class="mui-table-view-cell">临沂市兰山区红旗路207<span class="mui-badge mui-badge-success">12:05</span></li>

				</ul>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		var isOnDuty = false;
		var url = "http://192.168.10.193:8080/"

		function onDuty() {
			isOnDuty = true;
			getGeocode();
		}

		function offDuty() {
			isOnDuty = false;
			getGeocode();
		}
		var tableview = document.body.querySelector(".mui-table-view");
		createTableView();
		function createTableView() {
			tableview.innerHTML = "";

			mui.get(url + "kaoqin_findAll", null, function(results) {
				var i = 0,
					len = results.length;
				if(len == 0) {
					return;
				}
				for(; i < len; i++) {
					var li = document.createElement('li');
					li.classList.add('mui-table-view-cell');
					var newDate = new Date();
					newDate.setTime(results[i].timestamp);
					var hour, min;
					if(newDate.getMinutes() < 10) {
						min = "0" + newDate.getMinutes();
					} else {
						min = newDate.getMinutes();
					}
					if(newDate.getHours() < 10) {
						hour = "0" + newDate.getHours();
					} else {
						hour = newDate.getHours();
					}
					if(results[i].isOnDuty) {
						li.innerHTML = results[i].addresses + '<span class="mui-badge mui-badge-primary">' + hour + ":" + min + '</span>';
					} else {
						li.innerHTML = results[i].addresses + '<span class="mui-badge mui-badge-success">' + hour + ":" + min + '</span>';
					}
					tableview.appendChild(li);
				}
			}, 'json');
			/*for(i = 1; i < 30; i++) {
				var li = document.createElement('li');
				li.classList.add('mui-table-view-divider');
				li.innerText = '12月' + i + "日";
				tableview.appendChild(li);
				for(j = 1; j <= 4; j++) {
					li = document.createElement('li');
					li.classList.add('mui-table-view-cell');
					/*var span = document.createElement('span');
					span.classList.add('mui-badge mui-badge-primary');
					span.innerText='07:50';*/
			/*if(j%2==1){
				li.innerHTML = '临沂市兰山区红旗路207'+'<span class="mui-badge mui-badge-primary">12:05</span>';
			}else{
				li.innerHTML = '临沂市兰山区红旗路207'+'<span class="mui-badge mui-badge-success">12:05</span>';
			}*/
			//li.appendChild(span);
			//tableview.appendChild(li);
			//}

			//}*/
		}

		function geoInf(position) {
			var newDate = new Date();
			newDate.setTime(position.timestamp);
			var message = "地址:" + position.addresses + "\n" + "时间：" + newDate.toLocaleString();
			console.log(JSON.stringify(position));
			var data = {
				userId: '10010',
				coordsType: position.coordsType,
				country: position.address.country,
				province: position.address.province,
				city: position.address.city,
				district: position.address.district,
				street: position.address.street,
				cityCode: position.address.cityCode,
				addresses: position.addresses,
				latitude: position.coords.latitude,
				longitude: position.coords.longitude,
				accuracy: position.coords.accuracy,
				timestamp: position.timestamp,
				IsOnDuty: isOnDuty
			};

			var btnArray = ['是', '否'];
			mui.confirm(message, '提交考勤信息', btnArray, function(e) {
				if(e.index == 0) {
					mui.post(url + "kaoqin_save", data, function(result) {
						console.log(JSON.stringify(result));
					}, 'json');
					mui.toast('考勤成功!');
				} else {
					mui.alert('考勤失败，没有提交考勤数据!\n');
				}
			})
		}

		function getGeocode() {
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
				console.log("获取定位位置信息失败：" + e.message);
			}, { geocode: true, provider: 'baidu' });
		}
	</script>

</html>